<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  div {
    display: inline;
  }
</style>

<body>
  <!--  1 行内元素有哪些？块级元素有哪些？ 空(void)元素有哪些 -->
  <div>
    行内元素: span img input
    块级元素:div footer p h1-h6
    空元素:br hr
  </div>
  <!--- 元素之间的转化 -->
  <div>
    display: inline; 把某元素转换成了行内元素 ===>不独占一行的，并且不能设置宽高
    display: inline-block; 把某元素转换成了行内块元素 ===>不独占一行的，可以设置宽高
    display: block; 把某元素转换成了块元素 ===>独占一行，并且可以设置宽高
  </div>
  <!-- 页面导入样式时，使用link和@import有什么区别？ -->
  <div>
    区别一:link先有，后有@import（兼容性link比@import兼容）；
    区别二:加载顺序差别，浏览器先加载的标签link，后加载@import
  </div>


</body>

</html>